<!--
 * @Author: your name
 * @Date: 2021-09-15 10:18:13
 * @LastEditTime: 2021-09-16 14:59:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\planuser\components\pieEchart.vue
-->
<template>
    <div>
        <V-echart
            :tag="tags"
            title="加载时间统计"
            :loading="false"
            :datas="option"
            height="477px"
        ></V-echart>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import VEchart from '../../../../components/echarts/EchartsTEmp.vue'
import type { PropType } from 'vue'

export default defineComponent({
    name: 'PieEchart',
    props: {
        load: Boolean,
        dataInfo: {
            default: () => ({}),
        },
        tag: String as PropType<string>,
    },
    components: {
        VEchart,
    },
    setup(props) {
        let option = ref()
        let tags = ref()
        watch(
            () => props.dataInfo,
            () => {
                let infodatas = props.dataInfo
                tags.value = props.tag
                option.value = {
                    series: [
                        {
                            type: 'gauge',
                            min: 0,
                            max: 10000,
                            startAngle: 90,
                            endAngle: -270,
                            pointer: {
                                show: false,
                            },
                            progress: {
                                show: true,
                                overlap: false,
                                roundCap: true,
                                clip: false,
                                itemStyle: {
                                    borderWidth: 1,
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 40,
                                },
                            },
                            splitLine: {
                                show: false,
                                distance: 0,
                                length: 10,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                                distance: 50,
                            },
                            data: [
                                {
                                    value: infodatas.domTime,
                                    name: '页面渲染时间',
                                    title: {
                                        offsetCenter: ['0%', '7%'],
                                    },
                                    detail: {
                                        valueAnimation: true,
                                        offsetCenter: ['0%', '27%'],
                                    },
                                },
                                {
                                    value: infodatas.allTime,
                                    name: '加载总时间',
                                    title: {
                                        offsetCenter: ['0%', '-30%'],
                                    },
                                    detail: {
                                        valueAnimation: true,
                                        offsetCenter: ['0%', '-10%'],
                                    },
                                },
                            ],
                            title: {
                                fontSize: 13,
                            },
                            detail: {
                                width: 50,
                                height: 10,
                                fontSize: 10,
                                color: '#008c8c',
                                borderColor: '#008c8c',
                                borderRadius: 20,
                                borderWidth: 1,
                                top: 10,
                                formatter: '{value}ms',
                            },
                        },
                    ],
                }
            },
        )

        return {
            option,
            tags,
        }
    },
})
</script>

<style></style>
